<template>
  <div class="userset">
    <div class="user">
      <div class="form">
        <div>
          <p>昵称</p>
          <input v-model="userName" type="text" />
        </div>
        <div>
          <p>签名档</p>
          <input v-model="autograph" type="text" />
        </div>
        <div>
          <p>邮箱</p>
          <input v-model="userEmail" readonly type="text" />
          <router-link to="/home/set/searchpassword">更改</router-link>
        </div>
        <div>
          <p>域名</p>
          <input readonly type="text" placeholder="wuzhi.me/u/302913" />
        </div>
        <div>
          <p>
            我的登录密码:
            <router-link to="/home/set/resetpassword">更改</router-link>
          </p>
        </div>
        <div>
          <button @click="myUpdate">更新个人资料</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "userSet",
  data() {
    return {
      userEmail: "",
      userName: "",
      autograph: "",
    };
  },
  methods: {
    myUpdate() {
      if (this.userName.length == 0 || this.autograph.length == 0) {
        alert("不要乱玩，还没输入呢");
        return false;
      }
      alert("更新成功");

      let obj = JSON.parse(localStorage.getItem("userMsg"));
      obj.name = this.userName;
      localStorage.setItem("userMsg",JSON.stringify(obj))
      this.$store.state.userName = this.userName;
      this.$store.state.autograph = this.autograph;
    },
  },
  mounted() {
    this.userEmail = this.$store.state.userEmail;
    this.userName = this.$store.state.userName;
    this.autograph = this.$store.state.autograph;
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.name == "resetEmail" || from.name == "resetpassword") {
        vm.$store.state.isShow = true;
      }
    });
    next({ path: "/home/set/userset" });
  },
  beforeRouteLeave(to, from, next) {
    if (to.name == "resetEmail" || to.name == "resetpassword") {
      this.$store.state.isShow = false;
    }
    next();
  },
};
</script>

<style lang="less" scoped>
.userset {
  width: 100%;
  .user {
    width: 100%;
    .form {
      width: 300px;
      padding-top: 10px;
      div {
        margin: 15px 0 10px;
        a {
          color: blue;
          font-size: 16px;
        }
        p {
          margin-bottom: 15px;
        }
        input {
          border: 1px solid #ccc;
          width: 220px;
          height: 30px;
          border-radius: 3px;
          margin-right: 5px;
          font-size: 18px;
          padding-left: 5px;
        }
        button {
          border: 1px solid #ccc;
          border-radius: 5px;
          padding: 5px 15px;
          color: #808080;
          font-size: 16px;
          cursor: pointer;
          &:active {
            color: #000;
          }
        }
      }
    }
  }
}
</style>